<template>
	<view class="page_box">
		<view class="head_box " style="background-color: #92b9b7;">
			<yy-custom bgColor="#92b9b7" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">申请提货</block>
			</yy-custom>
		</view>

		<view class="content_box ">
			<view class="head padding-left padding-top flex justify-between  ">
				<view class="flex flex-direction text-black">
					<text class="f24">总库存(箱)</text>
					<text class="f60 text-bold">{{numTotal}}</text>
				</view>
				<view class="head-r flex  align-center justify-center"
					@click="jump('/pages/invManagement/deliverySubmission')">
					<image src="../../static/bibi.png" mode="aspectFill" style="width: 29rpx; height: 29rpx;"></image>
					<text class="text-white f32 margin-left-xs">申请提货</text>
				</view>
			</view>
			<view class="info flex justify-between align-center padding-lr">
				<text>处理人k:</text>
				<view class="flex align-center ">
					<image :src="obj.headimgurl" mode="aspectFill" style="width: 60rpx; height: 60rpx;"
						class="bg-brown round"></image>
					<text class="f30 text-black margin-left-sm">{{obj.nickname}}</text>
					<view class="info-inside flex align-center justify-around margin-left-sm">
						<text class="cuIcon-favorfill margin-right-xs" style="color: #fbb03b;"></text>
						<text class="f26 text-white">{{obj.level}}</text>
					</view>
				</view>
			</view>
			<view class="recording padding margin-top flex justify-between bg-white">
				<text class="f30 text-black">提货记录:</text>
				<view class="flex f30">
					<text class="flex flex-direction align-center  a" @click="flg(1)"
						:class="sts == 1 ? 'style' : ''">自提</text>
					<text class="flex flex-direction align-center a" @click="flg(0)"
						:class="sts == 0 ? 'style' : ''">快递</text>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="lower">
				<block v-if="sts == 1">

					<view class="padding flex flex-direction bg-white margin-bottom"
						v-for="(item, index1) in getListFrom" :key="index1">
						<view class="flex justify-between margin-bottom">
							<!-- <block v-for="(item1, index) in item.order[0]" :key="index"> -->
							<text class="f24 text-gray">发起时间：{{item.createDt}}</text>
							<!-- </block> -->
							<text class="f28 text-yellow" v-if="item.status == 0">已申请</text>
							<text class="f28 text-yellow" v-if="item.status == 4">已收货</text>
						</view>
						<view></view>
						<view class=" flex justify-between  align-center">
							<view class="">
								<view class="padding-tb-xs solid-bottom flex align-center"
									v-for="(item1, index) in item.order" :key="index">
									<view class="radius bg-gray padding-xs" style="width: 100rpx; height: 100rpx;">
										<image :src="item1.commodityImg" mode="aspectFill"
											class="radius bg-gradual-red wh100"></image>
									</view>
									<view class="flex flex-direction   margin-left-sm">
										<text class="text-black f30 ">{{item1.commodityName}}</text>
										<text class="text-gray f26 margin-top-xs ">数量：{{item1.num}}</text>
									</view>
									<text></text>
								</view>
							</view>
							<!-- 状态 0：已申请 1：待取货 2：已取消 3：已发货 4：已收货 
								1是自提取货  3是快递待收货 status -->
							<button class="cu-btn btn" @tap="addShow(item.id)" v-if="item.status == 1">确认收货</button>
						</view>
					</view>
				</block>
				<block v-if="sts == 0">
					<view class="padding flex flex-direction bg-white margin-bottom"
						v-for="(item, index1) in getListFrom" :key="index1">
						<view class="flex justify-between margin-bottom">
							<text class="f24 text-gray">发起时间：{{item.createDt}}</text>
							<text class="f28 text-gray">已完成</text>
						</view>
						<view></view>
						<view class=" flex justify-between  align-center">
							<view class="">
								<view class="padding-tb-xs solid-bottom flex align-center"
									v-for="(item1, index) in item.order" :key="index">
									<view class="radius bg-gray padding-xs" style="width: 100rpx; height: 100rpx;">
										<image :src="item1.commodityImg" mode="aspectFill"
											class="radius bg-gradual-red wh100"></image>
									</view>
									<view class="flex flex-direction  margin-left-sm">
										<text class="text-black f30 ">{{item1.commodityName}}</text>
										<text class="text-gray f26 margin-top-xs ">数量：{{item1.num}}</text>
									</view>
									<text></text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>

			<u-modal v-model="show" :content="content1" :show-cancel-button="true" @confirm="confirmAdd"></u-modal>
		</view>
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				sts: 1,
				show: false,
				getListFrom: [],
				numTotal: 0,
				current: 1,
				ouderId: '',
				obj: {},
				content1: '确定收货后，不能更改！',
			};
		},
		onShow() {
			this.storack()
		},
		onLoad(e) {
			this.getList()
			this.superIdInfo()
			// this.userInfo()
		},
		methods: {

			async confirmAdd() {
				const res = await this.$u.get('/pick/check/', {
					status: 4,
					id: this.ouderId,
				}, {});
				if (res.code == 0) {
					this.getList()
					return this.$refs.uToast.show({
						title: '申请收货完成!',
						type: 'none'
					});
				} else {
					return this.$refs.uToast.show({
						title: res.msg,
						type: 'none'
					});
				}
			},

			async superIdInfo() {
				let res = await this.$u.get('inviterrecord/page?superId=' + uni.getStorageSync('data').id);
				if (res.code == 0) {
					this.userInfo(res.data.superUser.id)
				}
			},


			jump(url) {
				uni.navigateTo({
					url
				});
			},

			flg(e) {
				this.sts = e;
				this.getListFrom = []
				this.getList()
			},

			async getList() {
				const res = await this.$u.get('/pick/list/', {
					size: 10,
					current: this.current,
					type: this.sts,
					userId: uni.getStorageSync('data').id,
				}, {});
				if (res.code == 0) {
					if (res.data != null) {
						this.getListFrom = [ ...this.getListFrom,  ...res.data.records]
					console.log('this.getListFro----------', this.getListFrom)
					}
				}
			},

			async storack() {
				const res = await this.$u.get('/repertory/' + uni.getStorageSync('data').id, {}, {});
				if (res.code == 0) {
					this.numTotal = res.data.totle
				}
			},

			async userInfo(id) {
				const res = await this.$u.get('/user/' + id, {}, {});
				if (res.code == 0) {
					this.obj = res.data
				}
			},

			lower() {
				this.current++
				this.getList()
			},

			addShow(item) {
				this.show = true
				this.ouderId = item
			},
		}
	};
</script>

<style lang="scss" scoped>
	.scroll-y {
		height: calc(100vh - 244px);
	}

	.page_box {
		background-color: #f7f7f7;
		margin-top: -5rpx;

		.content_box {
			.btn {
				width: 160rpx;
				height: 50rpx;
				background: #fbb03b;
				border-radius: 25rpx;
				white-space: nowrap;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}

			.head {
				width: 100vw;
				height: 200rpx;
				background: #92b9b7;

				.head-r {
					width: 268rpx;
					height: 70rpx;
					background: #fbb03b;
					border-radius: 29rpx 0rpx 0rpx 29rpx;
				}
			}

			.info {
				width: 706rpx;
				height: 120rpx;
				background: #ffffff;
				border-radius: 20rpx;
				margin: 0 auto;
				margin-top: -50rpx;

				.info-inside {
					// width: 80rpx;
					padding: 10rpx;
					height: 30rpx;
					background: linear-gradient(139deg, #393b56, #4f4f62);
					border-radius: 10rpx;
				}
			}

			.recording {
				.a {
					width: 200rpx;
				}

				.style {
					font-weight: 600;
				}

				.style::after {
					content: '';
					width: 50rpx;
					height: 6rpx;
					background: #fbb03b;
					border-radius: 3rpx;
					margin-top: 15rpx;
				}
			}

			.mark {
				width: 112rpx;
				height: 30rpx;
				background: linear-gradient(139deg, #393b56, #4f4f62);
				border-radius: 10rpx;
			}
		}
	}
</style>
